<template>
	<view class="home">
		<!-- 导航 -->
		<!-- 导航 -->
		<u-navbar bgColor="#ffffff" placeholder :title="title" :autoBack="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" color="#000000" size="20"></u-icon>
			</view>
		</u-navbar>
		<view class="time-switcher">
			<view class="left-btn" @click="switchTime(-1)">
				<u-icon name="play-left-fill" size="30" color="#4a90e2"></u-icon>
			</view>
			<view class="current-time">
				{{ displayTime }}
			</view>
			<view class="right-btn" @click="switchTime(1)" :class="{ disabled: isToday }">
				<u-icon name="play-right-fill" size="30" :color="isToday ? '#cccccc' : '#4a90e2'"></u-icon>
			</view>
		</view>

		<!-- 分段器 -->
		<view class="content">
			<!-- 雨量计信息 -->
			<view class="">
				<!-- 表格 -->
				<view class="table_box">
					<wyb-table ref="table" :headers="headers" :contents="contents" :font-size="fontSize"
						:value-format="valueFormat" border-color="#000000" content-bg-color="#ff8080"
						content-ft-color="#314761" height="1200rpx" :loading="loading" loader-bg-color="rgba(0,0,0,0.1)"
						loader-color="#fff" loader-size="100" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan,
			wybTable
		},
		data() {
			return {
				title: '',
				loading: false,
				fontSize: [40],
				headers: [{
					label: '雨量站',
					key: 'name',
					width: 350
				}, {
					label: '自计',
					key: 'ziJi',
					width: 200
				}, {
					label: '人工',
					key: 'renGong',

					width: 200
				}],
				valueFormat: [{
						key: 'name', //名字
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'ziJi', //自计
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 100000,
						key: 'renGong', //人工
						style: {
							color: '#ffffff',
							bgColor: '#ffaa00'
						}
					},
				],
				contents: [],
				rfsgId: '',
				currentDate: new Date()

			}
		},
		computed: {
			displayTime() {
				const year = this.currentDate.getFullYear()
				const month = this.currentDate.getMonth() + 1
				const day = this.currentDate.getDate()
				return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
			},
			isToday() {
				const today = new Date()
				return (
					this.currentDate.getFullYear() === today.getFullYear() &&
					this.currentDate.getMonth() === today.getMonth() &&
					this.currentDate.getDate() === today.getDate()
				)
			}
		},
		onLoad(option) {
			// 默认历史
			this.rfsgId = option.id
			this.title = option.name
			console.log('o*******', option);
		},
		onShow() {
			this.tabularData()
		},
		methods: {
			switchTime(days) {
				if (days > 0 && this.isToday) return

				const newDate = new Date(this.currentDate)
				newDate.setDate(newDate.getDate() + days)
				this.currentDate = newDate
				this.tabularData()
			},
			iconFn() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 表格数据
			tabularData() {
				uni.$u.http.get('/api/device/device/getRainfallStationGroupRainFall', {
					params: {
						"rfsgId": this.rfsgId,
						"date": this.displayTime,
					}
				}).then(res => {
					console.log('res////', res);
					this.contents = res.data
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
		},
	}
</script>
<style scoped lang="scss">
	// 时间切换
	.time-switcher {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// width: 430rpx;
		// height: 80rpx;
		// background-color: #ff0202;

		.current-time {
			font-size: 45rpx;
			color: #333;
		}
	}

	.scroll-Y {
		max-height: 1000rpx;
	}

	.home {
		.tab_box {
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		min-height: 100vh;
		background-color: #ecf3f7;

		.content {
			.con_bom {
				// color: #ffffff;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}

			}

			// 每日雨量
			.rainfallToday {
				border-radius: 30rpx;
				margin: 30rpx 30rpx 0rpx 30rpx;
				padding: 30rpx 30rpx 80rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rainfallToday_i {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

					.rainfallToday_a {
						color: #ffffff;
						font-size: 40rpx;
					}

					.rainfallToday_b {
						font-size: 50rpx;
						color: #67fff3;
					}
				}
			}

			.table_box {
				margin-top: 10rpx;
				// background-color: #4fc5bb;
			}

			.hyetal_box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #ffffff;

				.hyetal_a {
					padding: 20rpx;
					margin: 20rpx;
					border-radius: 20rpx;
					font-size: 40rpx;
					background-color: #6390c3;
				}

				.acvhyetal_a {
					background-color: #8f897e;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #7a7d81;
	}
</style>